<template>

  <div class="studentList__button">
    <el-button type="primary" class="issueAdd" @click="exportToExcel"><el-icon><DocumentAdd /></el-icon>导出</el-button>
  </div>

  <div class="tab_from">
    <el-table stripe
              :data="tableData"
              style="width: 100%" border
              :cell-style="{ textAlign: 'center' }"
              :header-cell-style="{ 'text-align': 'center' }"
              size="small"
              v-loading="loading"
              element-loading-text="Loading..."
              :element-loading-spinner="svg"
              element-loading-svg-view-box="-10, -10, 50, 50"
    >

      <el-table-column label="序号" width="50">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.id }}</span>
        </template>
      </el-table-column>

      <el-table-column label="请假学生" width="100">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.student.name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="年级班级" width="100">
        <template #default="scope">
          <span style="margin-left: 10px">{{ numberToChinese(scope.row.student.classes.classId) }} 年级 ({{ scope.row.student.classes.classId }})班</span>
        </template>
      </el-table-column>

      <el-table-column label="请假类型" width="100">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.type }}</span>
        </template>
      </el-table-column>

      <el-table-column label="请假时间" width="180">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.beginTime }}</span>
          <span>至</span>
          <span style="margin-left: 10px">{{ scope.row.endTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="请假事由" width="100">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.detail }}</span>
        </template>
      </el-table-column>

      <el-table-column label="发起人" width="80">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.teacher.name }}</span>
        </template>
      </el-table-column>

      <el-table-column label="发起时间" width="160">
        <template #default="scope">
          <span style="margin-left: 10px">{{ scope.row.beginTime }}</span>
        </template>
      </el-table-column>

      <el-table-column label="请假状态" width="180">
        <template #default="scope">
          <span style="margin-left: 10px" v-show="scope.row.state === '2'">
             <el-text class="mx-1" type="success">已通过</el-text>
          </span>
          <span style="margin-left: 10px" v-show="scope.row.state === '1'">
            <el-text class="mx-1" type="warning">待审核</el-text>
          </span>
        </template>
      </el-table-column>

      <el-table-column label="操作">
        <template #default="scope">
          <!--            <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">Delete</el-button>-->
          <el-text class="mx-1" type="primary" @click="handleCheck(scope.$index)">查看</el-text>
        </template>
      </el-table-column>

    </el-table>
  </div>

  <!--  分页  -->
  <paging v-if="pagState" @pag="handlePag" @pag-add="handlePagAdd" @pag-reduce="handlePagReduce" @pag-skip="handleSkip" :msg="pageList"/>

  <!-- 抽屉弹出层 -->
  <el-drawer v-model="visible" :show-close="false">
    <template #header="{ close, titleId, titleClass }">
      <h4 :id="titleId" :class="titleClass">
        查看请假申请</h4>
      <el-button type="danger" @click="close">
        <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
      </el-button>
    </template>
    <div class="leaveDetails">
      <p>{{checkList.student.name}} / {{grade}}年级（{{checkList.student.classes.classId}}）班</p>
      <p>{{checkList.teacher.name}}:{{checkList.initTime}}</p>
      <p>请假类型：{{checkList.type}}</p>
      <p>请假时间：{{checkList.beginTime}} 至 {{checkList.endTime}}</p>
      <p>请假事由：{{checkList.detail}}</p>
    </div>
    <div>
      <el-timeline>
        <el-timeline-item :color="checkList.state === '2'?'#0bbd87':''" :hollow="primary" center  placement="top">
          <div class="leaveState">
            <p>教师：{{checkList.teacher.name}}</p>
            <el-text class="mx-1" type="primary" v-if="checkList.state==='2'">已通过</el-text>
            <el-text class="mx-1" type="danger" v-else>待确认</el-text>
          </div>
        </el-timeline-item>

        <el-timeline-item :color="checkList.state === '2'?'#0bbd87':''" placement="top">
          <div class="leaveState">
            <p>家长：{{checkList.student.name}}</p>
            <el-text class="mx-1" type="primary" v-if="checkList.state==='2'">已通过</el-text>
            <el-text class="mx-1" type="danger" v-else>待确认</el-text>
          </div>
        </el-timeline-item>

      </el-timeline>
    </div>
  </el-drawer>
</template>

<script setup lang="ts">
import {defineAsyncComponent, reactive, ref} from "vue";
import service from "@/api";
import {jxGetLeaveRecordList} from "@/api/jiaxiaohutong";
import * as XLSX from 'xlsx';

const paging = defineAsyncComponent(() => import('@/components/paging.vue'))
const visible = ref(false)

const loading = ref(true)
// 类型相关数据
const genreData = ref([])
const genreMsg = [
  {
    value: 'inform1',
    label: '通知',
  },
  {
    value: 'inform2',
    label: '公告',
  },
  {
    value: 'inform3',
    label: '活动',
  },
  {
    value: 'inform4',
    label: '缴费通知',
  },
  {
    value: 'inform5',
    label: '选课通知',
  },
  {
    value: 'inform6',
    label: '缴费通知',
  },
]
// 获取通知列表
const handleDelete = (index: number, row: []) => {
  console.log(index, row)
}

let inFormList = ref([]) // 表格数据获取
let pages = ref(1) // 当前页
let total = ref(5) // 条数
let pagState = ref(false) // 当获取到数据展示分页
let pageList = '' // 分页数据，需要传递给分页子组件
let tableData = reactive([])
// 发请求
const getRes = async (pagDate: { cp: number; ps: number; })=> {
  const res = await service.jiaxiaohutong.jxGetLeaveRecordList(pagDate)
  inFormList.value = res.data.data.data // 表格数据
  pageList = res.data.data.page // 分页数据
  pagState.value = true // 当有数据展示分页条
  for (let i = 0; i < inFormList.value.length; i++) {
    tableData.push(inFormList.value[i])
  }
  loading.value = false // 加载动画 关闭
  console.log(tableData)
}

getRes({cp: pages.value,ps: total.value})

// 分页条数更改数据
function listMain(upDate:{pages: number,total: number}) {
  loading.value = true // 每次调用这个方法开启加载动画
  tableData.length=0 // 清空分页
  getRes({cp: upDate.pages-1,ps: upDate.total})
}

// 条数变更 --- 处理 分页组件 handlePag 事件
function handlePag(value: {pages: number,total: number}) {
  listMain(value)
}
// 增加
function handlePagAdd(value: {pages: number,total: number}) {
  listMain(value)
}

// 减少
function handlePagReduce(value: {pages: number,total: number}) {
  listMain(value)
}

// 跳转
function handleSkip(value: {pages: number,total: number}) {
  listMain(value)
}

//
// 查看
const checkList = ref('')
let grade = ref('')
function handleCheck(index: number) {
  checkList.value = tableData[index]
  grade.value = numberToChinese(checkList.value.student.classes.gradeId)
  visible.value = true
}

function numberToChinese(number: string | number) {
  console.log(number)
  const cnNums = ["一","二","三","四","五","六","七","八","九","十","十一","十二"]
  const index = parseInt(number, 10) - 1
  if (index < 0 || index > 11) {
    // 处理超出范围的数字
    return ""
  }
  return cnNums[index]
}

// 导出功能
let ExcList = []
let ExcObj = {
  id: 0,
  sName: '',
  classIdAndGradeId: '', // 年级
  type: '', // 类型
  beginTime: '', // 开始时间
  endTime: '', // 结束时间
  detail: '', // 请假事由
  tName: '',
  initTime: ''
}
function exportToExcel() {
  console.log(tableData)
  for (let i = 0; i < tableData.length; i++) {
    ExcList.push({
      id: tableData[i].id,
      sName: tableData[i].student.name,
      classIdAndGradeId: `${numberToChinese(tableData[i].student.classes.classId)}年级${tableData[i].student.classes.gradeId}`,
      type: tableData[i].type,
      beginTime: tableData[i].beginTime,
      endTime: tableData[i].endTime,
      detail: tableData[i].detail,
      tName: tableData[i].teacher.name,
      initTime: tableData[i].initTime
    })
  }
  const worksheet = XLSX.utils.json_to_sheet(ExcList);
  const workbook = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(workbook, worksheet, '请假人员名单');
  XLSX.writeFile(workbook, '请假人员.xlsx');
}
</script>

<style scoped>
.leaveDetails p{
  margin: 10px 0;
}
:deep(.el-text--primary){
  cursor:pointer;
}
.leaveDetails p:nth-child(2){
  font-size: 12px;
  color: #dedede;
}
.studentList__button{
  display: flex;
  justify-content: right;
  margin-bottom: 10px;
}
</style>
